<%--
  Created by IntelliJ IDEA.
  User: SINGLEDOG
  Date: 2019/9/27
  Time: 16:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://localhost:8080/mydev/css/regist.css">
    <script type="application/javascript" src="http://localhost:8080/mydev/js/jquery-3.4.1.js"></script>
    <script type="application/javascript" src="http://localhost:8080/mydev/layui/layui.js"></script>
    <link rel="stylesheet" href="http://localhost:8080/mydev/layui/css/layui.css">
</head>
<body>

<div class="login-box" id="_j_login_box">
    <div class="inner inner_v2">
        <div class="inner_v2_left">
            <div class="layui-tab">

                <%--<ul class="layui-tab-title">
                    <li class="layui-this">手机注册</li>
                    &lt;%&ndash;<li>手机注册</li>&ndash;%&gt;
                </ul>--%>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="text" name="userTel" lay-verify="title" autocomplete="off" placeholder="请输入手机号" class="layui-input" id="userTel">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="text" name="userNickname" lay-verify="title" autocomplete="off" placeholder="请输入注册昵称" class="layui-input" id="userNickname">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="text" name="pwd" id="pwd" lay-verify="required" lay-reqtext="密码不能为空" placeholder="请输入注册密码" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="get-code">
                                <input class="get-code-number-a" data-limit="number" type="text"
                                       placeholder="请输入验证码" id="code" name="code"
                                       onkeyup="this.value=this.value.replace(/\D/g,'')"
                                       onafterpaste="this.value=this.value.replace(/\D/g,'')" style="height:40px;margin-left: 31px">
                                <input class="code-btn" type="button" value="获取验证码" id="btn" onclick="sendMessage()">
                            </div>
                            <div class="form-link"><a href="/forget">注册视为同意《逍遥游用户使用协议》</a></div>
                            <div style="width: 310px; margin: 0 auto;border-radius: 50px 0;">
                                <button type="button" class="layui-btn layui-btn-fluid btn" id="regist">立即注册</button>
                            </div>
                        </form>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <div class="layui-input-block" style="width: 310px;height: 38px; margin-left: 21px!important;">
                                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="您的手机号码" class="layui-input">

                            </div>
                        </div>
                        <div class="form-link" style="margin-top: 25px;"><a href="/forget">注册视为同意《逍遥游用户使用协议》</a></div>
                        <div style="width: 310px; margin: 0 auto;border-radius: 50px 0;">
                            <button type="button" class="layui-btn layui-btn-fluid btn">立即注册</button>
                        </div>
                    </div>
                </div>
            </div>

            <%--<div class="connect" style="margin-top: 80px;">
                <p class="hd">用合作网站账户直接登录</p>
                <div class="bd">
                    &lt;%&ndash;<a href="/weibo" class="weibo"><img src="http://localhost:8080/mydev/images/xinl_D.png"> 新浪微博</a>&ndash;%&gt;
                    <a href="/qq" class="qq"><img src="http://localhost:8080/mydev/images/qq_D.png">QQ</a>
                    &lt;%&ndash;<a href="/wechat" class="weixin"><img src="http://localhost:8080/mydev/images/wx_D.png">微信</a>&ndash;%&gt;
                    <div class="clear"></div>
                </div>
            </div>--%>
        </div>
        <div class="inner_v2_right">
            <img src="http://localhost:8080/mydev/images/erweima1B.png">
            <p>扫一扫<br>下载逍遥游APP</p>
        </div>

    </div>
    <div class="bottom-link">
        已经注册?<a href="${pageContext.request.contextPath}/RegistLogin/login.jsp">马上登录</a>
    </div>
</div>



<%--layui的提示--%>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });
    });
</script>

<div class="fullscreen-bg" style="background-image: url(https://images.mafengwo.net/images/signup/wallpaper/44.jpg;);"><img src="https://images.mafengwo.net/images/signup/wallpaper/44.jpg
" style="width: 1536px; height: 100%;"></div>

<%--验证码控制--%>
<script type="text/javascript">
    var InterValObj; //timer变量，控制时间
    var count = 120; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    function sendMessage() {
        curCount = count;
        $("#btn").attr("disabled", "true");//发送验证码
        $("#btn").val(curCount + "秒后可重新发送");
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次请求后台发送验证码 TODO
    }
    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#btn").removeAttr("disabled");//启用按钮
            $("#btn").val("重新发送验证码");
        } else {
            curCount--;
            $("#btn").val(curCount + "秒后可重新发送");
        }
    }
</script>
<script>
    var sms = "";
    //发送验证码
    $("#btn").click(function() {
        console.log("已经出发，开始执行。。。。")
        var userTel = $("#userTel").val();
        var userPassword = $("#pwd").val();
        var userNickname = $("#userNickname").val();
        console.log("userTel:"+userTel);
        console.log("userNickname:"+userNickname);
        console.log("userPassword:"+userPassword);
        if (userTel != "") {
            $.ajax({
                url : "http://localhost:8080/mydev/regist/getcode",  //发送请求  目标地址
                type : "post",  //POST方式传输
                data : {  //发送到服务器的数据
                    "userTel" : userTel,
                    "userNickname" : userNickname,
                    "userPassword" : userPassword
                },
                success : function(result) {
                    if(result.code == 0){
                        alert("该手机号已经注册，请前往登录")
                    }else
                    sms = result.data;
                }
            });
        } else {
            alert("请输入手机号");
            return false;
        }
    });
    //点击注册
    $("#regist").click(function() {
     console.log("注册层走到");
        var userTel = $("#userTel").val();
        var userPassword = $("#pwd").val();
        var userNickname = $("#userNickname").val();
        var code = $("#code").val();
        console.log("code:"+code);
        if (code == "") {
            alert("请输入验证码");
        } else {
            if (sms == code) {
                console.log("userTel:"+userTel);
                console.log("userNickname:"+userNickname);
                console.log("userPassword:"+userPassword);
                console.log("http://localhost:8080/mydev/regist/noist");
                $.ajax({
                    url: "http://localhost:8080/mydev/regist/noist",
                    method:"POST",
                    dataType:"json",
                    data: {
                        "userTel": userTel,
                        "userNickname":userNickname,
                        "userPassword": userPassword,
                    },
                });
               window.location.href="http://localhost:8080/mydev/RegistLogin/login.jsp";
            } else {
                alert("验证码错误");
            }
            ;
        };
    });
</script>
</body>
</html>